<template>
  <div class="form-container">

    <!-- 表单主体 -->
    <el-form :model="formData" label-width="120px" label-position="right" class="form-body">
      <!-- 登录用户名 -->
      <el-form-item label="登录用户名">
        <el-input v-model="formData.loginname" placeholder="请输入" clearable />
      </el-form-item>

      <!-- 登录密码 -->
      <el-form-item label="登录密码">
        <el-input v-model="formData.loginpwd" placeholder="请输入" type="password" show-password clearable />
      </el-form-item>

      <!-- 手机号 -->
      <el-form-item label="手机号">
        <el-input v-model="formData.phone" placeholder="请输入" clearable />
      </el-form-item>

      <!-- 微信OPENID -->
      <el-form-item label="微信OPENID">
        <el-input v-model="formData.wxopenid" placeholder="请输入" clearable />
      </el-form-item>

      <!-- 昵称 -->
      <el-form-item label="昵称">
        <el-input v-model="formData.nickname" placeholder="请输入" clearable />
      </el-form-item>

      <!-- 头像上传 -->
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action=""
          :http-request="handleUpload"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="formData.headicon" :src="formData.headicon" class="avatar">
          <el-icon v-else class="avatar-uploader-icon">
            <Camera />
          </el-icon>
        </el-upload>
        <div class="upload-hint">
          建议尺寸：120×120像素<br>
          JPG、PNG格式，小于5M
        </div>
      </el-form-item>

      <!-- 按钮区域 -->
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "rquser-add"
});

import { ref } from 'vue';
import { User, Camera } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { addObj , uploadHeaderImg } from '@/api/rquser';
import { useRouter } from "vue-router";
const router = useRouter();

// 表单数据模型
const formData = ref({
  loginname: '',
  loginpwd: '',
  phone: '',
  wxopenid: '',
  nickname: '',
  headicon: ''
});

const handleUpload = async (options: any) => {
  const fileData = new FormData();
  console.log('上传文件:', options.file); // 打印上传的文件对象
  fileData.append('file', options.file);
  
  try {
    const res = await uploadHeaderImg(fileData);
    console.log('上传结果:', res); // 打印请求结果
    
    if(res.code === 20000) {
      formData.value.headicon = res.url;
      ElMessage.success('头像上传成功');
    } else {
      ElMessage.error(res.msg || '上传失败');
    }
  } catch (error) {
    console.error('上传出错:', error);
    ElMessage.error('上传过程中发生错误');
  }
};


// 上传前校验
const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg';
  const isPNG = file.type === 'image/png';
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isJPG && !isPNG) {
    ElMessage.error('头像图片只能是 JPG/PNG 格式!');
    return false;
  }
  if (!isLt5M) {
    ElMessage.error('头像图片大小不能超过 5MB!');
    return false;
  }
  return true;
};

// 提交表单
const handleSubmit = async () => {
  console.log('表单数据:', formData.value);
  const res = await addObj(formData.value);
  if(res.code === 20000) {
    ElMessage.success('添加成功');
    router.push('/rquser/list'); 
  } else {
    ElMessage.error(res.msg || '添加失败');
  }
};

// 重置表单
const handleReset = () => {
  formData.value = {
    loginname: '',
    loginpwd: '',
    phone: '',
    wxopenid: '',
    nickname: '',
    headicon: ''
  };
  ElMessage.info('表单已重置');
};
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.form-header {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  background: linear-gradient(135deg, #409EFF, #337ecc);
  color: white;

  h1 {
    font-size: 22px;
    font-weight: 500;
    margin-left: 12px;
  }

  .header-icon {
    font-size: 24px;
  }
}

.form-body {
  padding: 30px;

  :deep(.el-form-item) {
    margin-bottom: 24px;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  :deep(.el-input__wrapper) {
    border-radius: 6px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;

    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px #409EFF inset;
    }
  }
}

.avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    width: 120px;
    height: 120px;
    background-color: #f5f7fa;
    
    &:hover {
      border-color: #409EFF;
      background-color: #ecf5ff;
    }
  }
  
  .avatar-uploader-icon {
    font-size: 32px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
    object-fit: cover;
  }
}

.form-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;

  :deep(.el-form-item__content) {
    justify-content: center;
  }

  .el-button {
    width: 120px;
    height: 42px;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.3s;

    &:first-child {
      background-color: #409EFF;
      color: white;
      border: none;

      &:hover {
        background-color: #337ecc;
      }
    }

    &:last-child {
      background-color: #fff;
      color: #606266;
      border: 1px solid #dcdfe6;

      &:hover {
        color: #409EFF;
        border-color: #409EFF;
      }
    }
  }
}
</style>